<template>
  <div class="main-container1" >
    <div class="overlay-text">跨界全营销 · 拥抱大数据 · 打造新平台</div>
    <div class="overlay-text2">聚合营销新奇点</div>
<!--    <div class="image-background"></div>-->

<!--    <div class="appList">-->
<!--      <div v-for="(item,index) in appnameList" :key="index" :style="{ backgroundColor: item.bgColor }">-->
<!--        <router-link :to="`/icc/${item.page}`"> &lt;!&ndash; 使用Vue Router的router-link &ndash;&gt;-->
<!--          <img id="u8_img" class="img" :src="item.img">-->
<!--          <div class="content" :style="{ color: item.fontColor}">-->
<!--            <div>{{ item.name }}</div>-->
<!--            &lt;!&ndash;                  <img id="u8_img" class="imgIcon"&ndash;&gt;-->
<!--            &lt;!&ndash;                       src="../../../public/img/icon/next.png">&ndash;&gt;-->
<!--          </div>-->
<!--        </router-link>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="appList2">-->
<!--      <div v-for="(item,index) in appnameList2" :key="index" :style="{ backgroundColor: item.bgColor }">-->
<!--        <img id="u8_img" class="img" :src="item.img">-->
<!--        <div class="content" :style="{ color: item.fontColor }">-->
<!--          <div>{{ item.name }}</div>-->
<!--          &lt;!&ndash;                  <img id="u8_img" class="imgIcon"&ndash;&gt;-->
<!--          &lt;!&ndash;                       src="../../../public/img/icon/next.png">&ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="appList3">
      <div v-for="(item,index) in appnameList" :key="index">
        <router-link :to="`/icc/${item.page}`"> <!-- 使用Vue Router的router-link -->
          <img id="u8_img" class="img" :src="item.img">
          <div class="content" :style="{ color: item.fontColor}">
            <div>{{ item.name }}</div>
            <!--                  <img id="u8_img" class="imgIcon"-->
            <!--                       src="../../../public/img/icon/next.png">-->
          </div>
        </router-link>
      </div>
    </div>
    <div class="appList4">
      <div v-for="(item,index) in appnameList2" :key="index">
        <img id="u8_img" class="img" :src="item.img">
        <div class="content" :style="{ color: item.fontColor }">
          <div>{{ item.name }}</div>
          <!--                  <img id="u8_img" class="imgIcon"-->
          <!--                       src="../../../public/img/icon/next.png">-->
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'wel',
  data() {
    return {
      activeNames: ['1', '2', '3', '5'],
      logActiveNames: ['34'],
      appnameList: [{
        name: '小红书',
        img: 'https://boluochuixue-1302583871-1302583871.cos.ap-shanghai.myqcloud.com/upload/20240125/c1255be907a5a2d441fa2e785da871e9.png',
        bgColor: '#4FBEFF',
        page: 'dataBoard/hongshuData',
        fontColor: '#FFFFFF',
      }, {
        name: '快手',
        img: 'https://boluochuixue-1302583871-1302583871.cos.ap-shanghai.myqcloud.com/upload/20240125/ba6f0ccc40e1ef85117aa629f5d6294b.png',
        bgColor: '#4FBEFF',
        fontColor: '#FFFFFF',
      }, {
        name: '抖音',
        img: 'https://boluochuixue-1302583871-1302583871.cos.ap-shanghai.myqcloud.com/upload/20240125/4903ea849d5e1934dd37a68a276ea612.png',
        bgColor: '#4FBEFF',
        fontColor: '#FFFFFF',
      }, {
        name: '哔哩哔哩',
        img: 'https://boluochuixue-1302583871-1302583871.cos.ap-shanghai.myqcloud.com/upload/20240125/1519e328ba9f8d6ba083c20b8b0d20a1.png',
        bgColor: '#4FBEFF',
        fontColor: '#FFFFFF',
      }],
      appnameList2: [{
        name: '视频号',
        img: 'https://boluochuixue-1302583871-1302583871.cos.ap-shanghai.myqcloud.com/upload/20240125/db18ec131c79de345c00bc63792d7746.png',
        bgColor: '#4FBEFF',
        fontColor: '#FFFFFF',
      }, {
        name: '知乎',
        img: 'https://boluochuixue-1302583871-1302583871.cos.ap-shanghai.myqcloud.com/upload/20240125/d166471685af5117a194ffabe37d386c.png',
        bgColor: '#4FBEFF',
        fontColor: '#FFFFFF',
      }, {
        name: '微博',
        img: 'https://boluochuixue-1302583871-1302583871.cos.ap-shanghai.myqcloud.com/upload/20240125/bd880a76c0fb35c02c181191e5845b1e.png',
        bgColor: '#4FBEFF',
        fontColor: '#FFFFFF',
      }],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    handleChange(val) {
      window.console.log(val);
    },
  },
};
</script>

<style>
.image-background {
  width: 1500px;
  height: 580px;
  border-radius: 50px;
  background-image: url(../../../public/img/index/bac.jpg);
  background-size: cover;
  margin-top: 12px;
  margin-bottom: 30px;
  margin-left: 90px;
  background-position: center top;
  /* 其他样式 */
}

.appList {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 1800px;
  margin-top: 550px;
  margin-left: 19.5%;
  > div {
    width: 200px;
    height: 100px;
    margin: 10px 50px 30px;
    font-size: 30px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    .img {
      width: 60px;
      height: 60px;
      position: absolute;
      left: 12px;
      top: 18px;
    }

    .content {
      margin-left: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 28px;
      font-weight: bold;
      letter-spacing: 1px;
    }
  }
}

.appList2 {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 1400px;
  margin-top: 700px;
  margin-left: 26%;
  > div {
    width: 200px;
    height: 100px;
    margin-left: 50px;
    margin-top: 20px;
    margin-right: 50px;
    font-size: 30px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    .img {
      width: 60px;
      height: 60px;
      position: absolute;
      left: 12px;
      top: 18px;
    }

    .content {
      margin-left: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 28px;
      font-weight: bold;
      letter-spacing: 1px;
    }
  }
}

.appList3 {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 1800px;
  margin-top: 26.5%;
  margin-left: 20%;
  > div {
    margin-left: 50px;
    margin-top: 20px;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    .img {
      width: 60px;
      height: 60px;
      position: absolute;
      left: 12px;
      top: 18px;
    }

    .content {
      margin-left: 90px;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 28px;
      font-weight: bold;
      letter-spacing: 1px;
    }
  }
}

.appList4 {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 1800px;
  margin-top: 32%;
  margin-left: 28%;
  > div {
    margin-left: 50px;
    margin-top: 20px;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    .img {
      width: 60px;
      height: 60px;
      position: absolute;
      left: 12px;
      top: 18px;
    }

    .content {
      margin-left: 90px;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 28px;
      font-weight: bold;
      letter-spacing: 1px;
    }
  }
}

.overlay-text {
  position: absolute;
  margin-top: 13%;
  margin-left: 50%; /* 根据需要调整位置 */
  transform: translate(-51%, -50%); /* 使文字居中于图片 */
  color: white; /* 文字颜色 */
  font-size: 50px;
  text-shadow: 2px 2px 4px rgba(200, 200, 200, 0.5); /* 添加阴影效果 */
  /* 添加其他你需要的样式，例如字体大小、行高等 */
}

.overlay-text2 {
  position: absolute;
  margin-left: 51%; /* 根据需要调整位置 */
  margin-top: 20.5%;
  transform: translate(-37%, -50%); /* 使文字居中于图片 */
  color: white; /* 文字颜色 */
  width: 100%;
  font-size: 180px;
  font-weight: bold;
  text-shadow: 4px 5px 5px rgba(200, 200, 200, 0.6); /* 添加阴影效果 */
  /* 添加其他你需要的样式，例如字体大小、行高等 */
}

.main-container1 {
  width: 100%;   /* 视口宽度 */
  height: 100%;  /* 视口高度 */
  background-image: url(../../../public/img/index/bac.jpg);
  background-size: cover;
  background-position: center top;
}

</style>
